<template>
  <div class="user-info-page">
    <h2>用户基本信息</h2>
    <el-card :body-style="{ padding: '10px' }" class="user-info-card">
      <!-- 显示用户头像 -->
      <img :src="user.avatarUrl" alt="用户头像" class="user-avatar">
      <p>用户名：{{ user.username }}</p>
      <!-- 显示用户电话 -->
      <p>用户电话：{{ user.phone }}</p>
      <!-- 显示注册时间 -->
      <p>注册时间：{{ user.registerDate }}</p>
    </el-card>
    <h2>收藏的餐厅列表</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="(restaurant, index) in favoriteRestaurants" :key="index">
        <el-card :body-style="{ padding: '10px' }" class="restaurant-card">
          <img :src="restaurant.imageUrl" alt="餐厅图片" class="restaurant-image">
          <h3>{{ restaurant.name }}</h3>
          <div class="button-group">
            <el-button
                type="text"
                @click="removeFromFavorites(restaurant.id)"
                class="cancel-favorite-button"
            >
              取消收藏
            </el-button>
            <el-button
                type="text"
                @click="openCommentDialog(restaurant.id)"
                class="comment-button"
            >
              评论
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <h2>历史操作记录</h2>
    <el-table :data="historyRecords" style="width: 100%">
      <el-table-column prop="action" label="操作"></el-table-column>
      <el-table-column prop="target" label="目标"></el-table-column>
      <el-table-column prop="time" label="时间"></el-table-column>
      <el-table-column label="操作">
        <template v-slot:default="scope">
          <el-button
              type="text"
              @click="deleteHistoryRecord(scope.row)"
              class="delete-history-button"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const user = ref({
      // 设置用户头像的URL属性
      avatarUrl: '/head.jpeg',
      username: '22111303146yanyingkun',
      phone: '13812345678',
      registerDate: '2024-01-01'
    });

    const favoriteRestaurants = ref([
      {
        id: 1,
        name: '演员陆二喜的鸡汤餐厅',
        imageUrl: '/restaurant1.jpeg'
      },
      {
        id: 2,
        name: '安师大一食堂',
        imageUrl: '/restaurant2.jpeg'
      },
      {
        id: 3,
        name: '安师大二食堂',
        imageUrl: '/restaurant3.png'
      }
    ]);

    const historyRecords = ref([

    ]);

    const removeFromFavorites = (id) => {
      console.log('尝试取消收藏的餐厅ID:', id);
      // 找到要取消收藏的餐厅在列表中的索引
      const index = favoriteRestaurants.value.findIndex(
          (restaurant) => restaurant.id === id
      );
      console.log('找到的索引:', index);
      if (index!== -1) {
        console.log('操作前收藏列表:', favoriteRestaurants.value);
        // 从收藏列表中移除该餐厅
        favoriteRestaurants.value.splice(index, 1);
        console.log('操作后收藏列表:', favoriteRestaurants.value);
        console.log('已成功取消收藏该餐厅');

        // 将取消收藏操作记录到历史操作记录表
        historyRecords.value.push({
          action: '取消收藏',
          target: favoriteRestaurants.value[index]?.name,
          time: new Date().toISOString()
        });
      } else {
        console.error('未找到要取消收藏的餐厅');
      }
    };

    const openCommentDialog = (id) => {
      // 这里模拟打开评论对话框的操作，比如弹出一个提示框显示餐厅ID
      alert(`正在打开餐厅ID为${id}的评论对话框`);
      console.log(`已触发打开餐厅ID为${id}的评论对话框操作`);

      // 将评论操作记录到历史操作记录表
      historyRecords.value.push({
        action: '评论',
        target: favoriteRestaurants.value.find((r) => r.id === id).name,
        time: new Date().toISOString()
      });
    };

    const deleteHistoryRecord = (row) => {
      // 找到要删除的历史操作记录在列表中的索引
      const index = historyRecords.value.findIndex(
          (record) => record === row
      );
      if (index!== -1) {
        // 从历史操作记录表中移除该记录
        historyRecords.value.splice(index, 1);
        console.log('已成功删除历史操作记录');
      } else {
        console.error('未找到要删除的历史操作记录');
      }
    };

    return {
      user,
      favoriteRestaurants,
      historyRecords,
      removeFromFavorites,
      openCommentDialog,
      deleteHistoryRecord
    };
  }
};
</script>

<style scoped>
.user-info-page {
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

h2 {
  color: #333;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.restaurant-image {
  width: 100%;
  height: 150px;
  /* 将object-fit属性修改为contain，使图片完整显示 */
  object-fit: contain;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.cancel-favorite-button {
  color: white;
  background: linear-gradient(to bottom, #999, #666);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cancel-favorite-button:hover {
  background: linear-gradient(to bottom, #666, #333);
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.comment-button {
  color: white;
  background: linear-gradient(to bottom, #007BFF, #0056b3);
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.comment-button:hover {
  background: linear-gradient(to bottom, #0056b3, #00337a);
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.el-card.user-info-card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.el-card.restaurant-card {
  transition: all 0.3s ease;
}

.el-card.restaurant-card:hover {
  background-color: #f2f2f2;
}

.delete-history-button {
  color: white;
  background-color: #FF4136; /* 按钮红颜色 */
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.delete-history-button:hover {
  background-color: #FF2400; /* 悬停时颜色变深 */
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
</style>
